<template>
  <div class="posters">
    <wc-swiper v-if="slidesList.length" :autoplay="false" :pagination="false">
      <wc-slide v-for="(item, index) in slidesList" :key="index">
        <div class="poster">
          <img id="img1" :src="item">
        </div>
        <div v-if="showButton" class="confirm" @click="generateImage(index)">
          确定生成
        </div>
      </wc-slide>
    </wc-swiper>
    <div id="qrcode" style="display:none"></div>
    <div v-if="!showButton">
      <div class="poster">
        <img id="img3" >
      </div>
      <div class="save">
        还等什么,马上长按保存图片分享给朋友们吧
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showButton: true,
        slidesList: [
          'src/assets/posters/poster1.jpg',
          'src/assets/posters/poster2.jpg',
          'src/assets/posters/poster3.jpg',
          'src/assets/posters/poster4.jpg'
        ]
      };
    },
    methods: {
      generateImage(index) {
        this.showButton = false;
        // TODO
        /* eslint-disable no-new */
        new QRCode(document.getElementById('qrcode'), 'http://impic.oss-cn-shenzhen.aliyuncs.com/201608/kslb/8d995ab4001b020d95bb0f7b87b6ceab.jpeg');
        setTimeout(() => {
          const img1 = document.createElement('img');
          img1.src = this.slidesList[index];
          const img2 = document.getElementById('qrcode').getElementsByTagName('img')[0];
          img2.style.display = 'none';
          const img3 = document.getElementById('img3');
          let canvas = document.getElementById('img-canvas');
          if (!canvas) {
            canvas = document.createElement('canvas');
            canvas.id = 'img-canvas';
            canvas.style.display = 'none';
            document.body.appendChild(canvas);
          }
          const ctx = canvas.getContext('2d');
          canvas.width = img1.naturalWidth;
          canvas.height = img1.naturalHeight;
          ctx.drawImage(img1, 0, 0, img1.naturalWidth, img1.naturalHeight);
          ctx.drawImage(img2, 90, 1070, 152, 152);
          img3.src = canvas.toDataURL('image/png');
          this.slidesList = [];
        }, 0);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .posters {
    padding: 0 .4rem;
  }
  .poster img {
    width: calc(100% - 4px);
    height: calc(13.34rem - 4px);
    border: 2px solid #9f9f9f;
  }
  .confirm {
    text-align: center;
    margin: .42rem auto;
    background: #db2230;
    width: 2.86rem;
    height: .68rem;
    color: #fff;
    font-size: .36rem;
    line-height: .68rem;
    border-radius: .3rem;
  }
  .save {
    text-align: center;
    font-size: .28rem;
    color: #282828;
    line-height: 1.52rem;
  }
</style>
